<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="app">
			<my-component>
				<h1 slot="header">我是头部</h1>
				<div slot="footer">我是底部</div>
				<p>11</p>
				<p>22</p>
				<p>33</p>
			</my-component>
		</div>
		<script src="js/vue2.5.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {

				},
				components: {
					'my-component': {
						template: '<div class="main"><div class="header"><slot name="header"></slot></div><div class="body"><slot></slot></div><div class="footer"><slot name="footer"></slot></div></div>',
						mounted() {
							var header = this.$slots.header;
							console.log('header', header[0]);
						}
					}
				}
			})
		</script>
	</body>

</html>